<template>
	<view :style="{ '--color': parameter.bgColor || vuex_config.themeColor1 }">
		<view v-if="!parameter.layout || parameter.layout == 1" class="tradition" :style="{
        'background-image': 'url(' + (parameter.bg || '') + ')',
        'background-color': parameter.bg ? '' : parameter.bgColor || vuex_config.themeColor1,
      }">
			<view :style="{ padding: (parameter.bgTop || 0) + 'px' + ' 0px ' + (parameter.bgBot || 0) + 'px', }">
				<view class="my-user-top">
					<view class="header_img" @click="jump('/package/user/user-info/index')">
						<image :src="vuex_user.headimgurl" mode="aspectFill" />
					</view>
					<view class="my-user-center" v-if="vuex_user && vuex_user.pk_id">
						<view class="user-name">
							<view class="user-title">{{ vuex_user.nickname ? vuex_user.nickname : '用户昵称' }}</view>
							<view class="user-sign" v-if="vuex_business.signin > 0" @click="goSign">签到</view>
						</view>
						<view>
							<view class="distributor">{{ vuex_user.level_name || '普通会员' }} ID:{{ vuex_user.pk_id }}
							</view>
							<view v-if="vuex_user.parent_name && parameter.invitees == 2" class="distributor"
								@click="seeParent">邀请人：{{ vuex_user.parent_name }}</view>
						</view>
					</view>
					<view v-else class="my-user-center">
						<view class="u-font-32 fw-bold c-ff" @click="goLogin">未登录</view>
					</view>
					<view class="my-user-right" @click="$to('/package/user/set-up/index')"
						v-if="parameter.showSet != 2">
						<view class="iconfont iconfont-e696" />
					</view>
				</view>
				<view class="my-user-bottom" v-if="parameter.showArr && parameter.showArr[0]">
					<template v-for="(item, index) in parameter.showArr">
						<view @click="goItem(item.titleEn)" :key="index" class="user-class">
							<view class="line-1 u-line-1">
								{{ item.titleEn == 'balance' ? '￥' : '' }}{{ vuex_count[item.titleEn] || 0 }}
							</view>
							<view>{{ item.titleCn }}</view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<view v-else-if="parameter.layout == 2" class="l2_main"
			:style="{ '--color1': parameter.fontColor || '#E5C4A1' }">
			<view class="bg_item"
				:style="parameter.bg ? 'background-image:url(' + parameter.bg + ')' : parameter.bgC ? 'background-color:' + parameter.bgC : ''">
			</view>
			<view class="layout2" :style="parameter.contBg ? 'background-image:url(' + parameter.contBg + ')' : ''">
				<view class="my-user-right" @click="$to('/package/user/set-up/index')" v-if="parameter.showSet != 2">
					<view class="iconfont iconfont-e696" />
				</view>
				<view class="l2_top">
					<view class="l2_img" @click="jump('/package/user/user-info/index')">
						<image :src="vuex_user.headimgurl" mode="aspectFill" />
					</view>
					<view class="l2_cont">
						<view class="l2_name_box" v-if="vuex_user && vuex_user.pk_id">
							<view class="user-title">{{ vuex_user.nickname ? vuex_user.nickname : '用户昵称' }}</view>
							<view class="distributor">{{ vuex_user.level_name || '普通会员' }} ID:{{ vuex_user.pk_id }}
							</view>
							<view v-if="vuex_user.parent_name && parameter.invitees == 2" class="distributor"
								@click="seeParent">邀请人：{{ vuex_user.parent_name }}</view>
						</view>
						<view v-else class="u-font-32 fw-bold c-ff" @click="jump('/package/user/user-info/index')">未登录
						</view>
						<view class="l2_sign" v-if="vuex_business.signin > 0"
							:style="parameter.sign_bg ? 'background-image:url(' + parameter.sign_bg + ')' : ''">立即签到
						</view>
					</view>
				</view>
				<view class="my-user-bottom" v-if="parameter.showArr && parameter.showArr[0]">
					<template v-for="(item, index) in parameter.showArr">
						<view @click="goItem(item.titleEn)" :key="index" class="user-class">
							<view class="line-1 u-line-1">
								{{ item.titleEn == 'balance' ? '￥' : '' }}{{ vuex_count[item.titleEn] || 0 }}
							</view>
							<view>{{ item.titleCn }}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniLinkTo
	} from '@/utils/uniPromise.js';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		props: ["templateItem"],
		data() {
			return {
				parameter: {},
				pageData: [],
				urlObj: {
					balance: '/package/user/balance/index',
					integral: '/package/user/integral/index',
					favourite: '/package/user/collection/index',
					browsing_history: '/package/user/browsing/index',
				},
			};
		},
		mounted() {
			this.pageData = this.templateItem.pageData
			this.parameter = {
				...this.templateItem.parameter,
				showArr: this.templateItem.parameter.showArr ? this.templateItem.parameter.showArr : [{
						titleCn: '我的余额',
						titleEn: 'balance'
					},
					{
						titleCn: '我的积分',
						titleEn: 'integral'
					},
					{
						titleCn: '我的收藏',
						titleEn: 'favourite'
					},
					{
						titleCn: '浏览记录',
						titleEn: 'browsing_history'
					},
				]
			}
		},
		computed: {
			...mapState(['vuex_count'])
		},

		methods: {
			goItem(linkUrl) {
				this.$login('goItem', linkUrl).then(() => {
					this.$linkTo(this.urlObj[linkUrl])
				});
			},
			jump(url) {
				this.$login('jump', url).then(() => {
					uniLinkTo(url);
				});
			},
			goSign() {
				uniLinkTo('/package/user/sign-in/index');
			},
			goLogin() {
				this.$login();
			},
			seeParent() {
				if(this.vuex_user.users_agent_card_id > 0){
					this.$linkTo(`/package/business-card/share-card/index?id=${this.vuex_user.users_agent_card_id}&noShare=${1}`)
				}else{
					this.$linkTo(`/package/userSuper/share/parentData/index?id=${this.vuex_user.parent_id}`)
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.my-user-bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		line-height: normal;

		.user-class {
			flex: 1;
			overflow: hidden;

			.line-1 {
				word-break: break-all;
				margin-bottom: 4rpx;
			}
		}
	}

	.tradition {
		position: relative;
		// height: 412rpx;
		padding-top: 46rpx;
		padding-bottom: 134rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.my-user-top {
			display: flex;
			justify-content: space-between;

			.header_img {
				width: 120rpx;
				height: 120rpx;
				background: #ccc;
				border-radius: 50%;
				margin: 0 30rpx;
				overflow: hidden;
			}

			.my-user-right {
				font-size: 32rpx;
				color: #fff;
				margin-right: 20rpx;
				cursor: pointer;
				margin-top: 20rpx;
			}
		}

		.my-user-center {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-right: 16rpx;

			.user-name {
				display: flex;
				align-items: center;

				.user-title {
					color: #fff;
					font-size: 30rpx;
					font-weight: 700;
					margin-right: 20rpx;
				}

				.user-sign {
					text-align: center;
					line-height: 40rpx;
					width: 80rpx;
					height: 40rpx;
					background: #fff;
					color: var(--color);
					font-size: 26rpx;
					font-weight: 500;
					border-radius: 4rpx;
				}
			}

			.distributor {
				display: inline-block;
				padding: 4rpx 20rpx;
				background: #fe857c;
				border-radius: 20rpx;
				font-size: 20rpx;
				color: #fff;
				margin-top: 12rpx;
				margin-right: 10rpx;
			}
		}

		.my-user-bottom {
			color: #fff;
		}
	}

	.l2_main {
		.bg_item {
			height: 228rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.layout2 {
			margin: -208rpx 24rpx 0;
			position: relative;
			height: 306rpx;
			background-image: url('http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202107/jhstest/54021268389209.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 30rpx;
			overflow: hidden;
			padding-top: 46rpx;

			.my-user-right {
				position: absolute;
				right: 30rpx;
				top: 26rpx;
				color: var(--color1);
			}

			.l2_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.l2_img {
					width: 120rpx;
					height: 120rpx;
					background-color: #ccc;
					border-radius: 50%;
					overflow: hidden;
					margin: 0 30rpx;
				}
			}

			.my-user-bottom {
				color: var(--color1);
			}
		}
	}

	.l2_cont {
		width: 74%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.l2_name_box {
			display: flex;
			flex-direction: column;

			.user-title {
				font-weight: 700;
				color: var(--color1);
				margin-right: 20rpx;
				font-size: 34rpx;
			}

			.distributor {
				display: inline-block;
				line-height: 34rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: var(--color1);
				margin-top: 10rpx;
			}
		}

		.l2_sign {
			width: 160rpx;
			height: 58rpx;
			background-image: url('http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202107/jhstest/50612101883867.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2c2a29;
			font-weight: bold;
			font-size: 26rpx;
			border-radius: 4rpx;
			margin-right: 42rpx;
			position: relative;
			top: 10rpx;
		}
	}
</style>
